let currentSort = 'default';
let isAscending = true;

// 渲染商品列表
function renderProducts(products) {
    console.log('开始渲染商品列表');
    const $productList = $('#productList');
    const $totalCount = $('#total-count');
    
    // 更新商品总数
    $totalCount.text(products.length);
    
    // 清空商品列表
    $productList.empty();
    
    // 渲染每个商品
    products.forEach(product => {
        console.log('渲染商品：', product);
        const productHtml = `
            <div class="product-item">
                <a href="product-detail.html?id=${product.id}" class="product-link">
                    <div class="product-image">
                        <img src="${product.image}" alt="${product.title}" onerror="this.src='./images/default.jpg'">
                    </div>
                    <div class="product-info">
                        <div class="product-title">${product.title}</div>
                        <div class="product-price">¥${product.price.toLocaleString()}</div>
                        <div class="product-sales">月销量 ${product.sales}</div>
                        <div class="product-shop">${product.shop}</div>
                    </div>
                </a>
            </div>
        `;
        $productList.append(productHtml);
    });
    
    console.log('商品列表渲染完成');
}

// 绑定排序事件
function bindSortEvents() {
    let isAscending = true;
    
    $('.sort-item').click(function() {
        const $this = $(this);
        const sortType = $this.data('sort');
        
        // 更新active状态
        $('.sort-item').removeClass('active');
        $this.addClass('active');
        
        // 如果点击相同的排序方式，切换升降序
        if ($this.hasClass('current')) {
            isAscending = !isAscending;
        } else {
            isAscending = true;
            $('.sort-item').removeClass('current');
            $this.addClass('current');
        }
        
        // 排序并渲染
        const sortedProducts = sortProducts(searchData, sortType, isAscending);
        renderProducts(sortedProducts);
    });
}

// 排序商品
function sortProducts(products, type, isAsc) {
    const sortedProducts = [...products];
    
    if (type === 'default') {
        return sortedProducts;
    }
    
    sortedProducts.sort((a, b) => {
        const compareValue = type === 'price' ? a.price - b.price : a.sales - b.sales;
        return isAsc ? compareValue : -compareValue;
    });
    
    return sortedProducts;
}

// 初始化
$(document).ready(function() {
    console.log('页面加载完成');
    console.log('搜索数据：', searchData);
    renderProducts(searchData);
    bindSortEvents();

    // 绑定图片加载事件
    $(document).on('error', '.product-image img', function() {
        $(this).addClass('error');
    });

    // 排序功能
    $('.sort-item').click(function() {
        const $this = $(this);
        const sortType = $this.data('sort');
        
        // 更新激活状态
        $('.sort-item').removeClass('active');
        $this.addClass('active');
        
        // 排序商品
        let sortedProducts = [...searchData];
        if (sortType === 'sales') {
            sortedProducts.sort((a, b) => b.sales - a.sales);
        } else if (sortType === 'price') {
            sortedProducts.sort((a, b) => a.price - b.price);
        }
        
        // 重新渲染
        renderProducts(sortedProducts);
    });

    // 搜索功能
    $('#searchInput').on('input', function() {
        const keyword = $(this).val().toLowerCase().trim();
        const filteredProducts = searchData.filter(product => 
            product.title.toLowerCase().includes(keyword)
        );
        renderProducts(filteredProducts);
    });

    // 初始化渲染
    renderProducts(searchData);

    // 检查数据是否正确加载
    console.log('搜索数据:', searchData);
});

// 获取URL参数
function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

// 根据分类ID过滤商品
function filterByCategory(categoryId) {
    // 这里可以根据实际需求实现分类过滤逻辑
    // 现在暂时返回所有商品
    return searchData;
}

// 初始化时获取分类参数并过滤
const categoryId = getQueryParam('category');
if (categoryId) {
    const filteredProducts = filterByCategory(categoryId);
    renderProducts(filteredProducts);
} 